<template>
    <div class="search-box">
        <div class="input-box">
            <input type="text" :placeholder="defaultKeyword"
                   placeholder-class="placeholder-class" confirm-type="search">
        </div>
<!--        <div class="search-btn" >搜索</div>-->
    </div>
</template>
<script>
    export default {
        name: "qkStoreSearch",
        data() {
            return {
                defaultKeyword:'请输入你要搜索的宝贝'
            }
        },
    }
</script>
<style lang="scss" scoped>
    view{display:block;}
    .search-box {width:350px;background-color:rgb(242,242,242);padding:7.5px 2.5%;display:flex;justify-content:space-between;}
    .search-box .mSearch-input-box{width: 100%;}
    .search-box .input-box {width:95%;flex-shrink:1;display:flex;justify-content:center;align-items:center;}
    .search-box .search-btn {width:15%;margin:0 0 0 2%;display:flex;justify-content:center;align-items:center;flex-shrink:0;font-size:14px;color:#fff;background:linear-gradient(to right,#ff9801,#ff570a);border-radius:30px;}
    .search-box .input-box>input {width:100%;height:30px;font-size:16px;border:0;border-radius:30px;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 3%;margin:0;background-color:#ffffff;}
    .placeholder-class {color:#9e9e9e;}
    .search-keyword {width:100%;background-color:rgb(242,242,242);}
    .keyword-list-box {height:calc(100vh - 55px);padding-top:5px;border-radius:10px 10px 0 0;background-color:#fff;}
    .keyword-entry-tap {background-color:#eee;}
    .keyword-entry {width:94%;height:40px;margin:0 3%;font-size:15px;color:#333;display:flex;justify-content:space-between;align-items:center;border-bottom:solid 1px #e7e7e7;}
    .keyword-entry image {width:30px;height:30px;}
    .keyword-entry .keyword-text,.keyword-entry .keyword-img {height:40px;display:flex;align-items:center;}
    .keyword-entry .keyword-text {width:90%;}
    .keyword-entry .keyword-img {width:10%;justify-content:center;}
    .keyword-box {height:calc(100vh - 55px);border-radius:10px 10px 0 0;background-color:#fff;}
    .keyword-box .keyword-block {padding:5px 0;}
    .keyword-box .keyword-block .keyword-list-header {width:94%;padding:5px 3%;font-size:13.5px;color:#333;display:flex;justify-content:space-between;}
    .keyword-box .keyword-block .keyword-list-header image {width:20px;height:20px;}
    .keyword-box .keyword-block .keyword {width:94%;padding:3px 3%;display:flex;flex-flow:wrap;justify-content:flex-start;}
    .keyword-box .keyword-block .hide-hot-tis {display:flex;justify-content:center;font-size:14px;color:#6b6b6b;}
    .keyword-box .keyword-block .keyword>view {display:flex;justify-content:center;align-items:center;border-radius:30px;padding: 5px 15px;margin:5px 10px 5px 0;min-height: 20px;line-height:20px;font-size:14px;background-color:rgb(242,242,242);color:#6b6b6b;}

</style>